<template>
	<view class="content">
		
		<uni-forms ref="form" :rules="rules"  :value="form" validate-trigger="submit" >
		
			 <uni-forms-item required label="联系电话" name="phone" >
			     <uni-easyinput type="number" v-model="form.phone" placeholder="请输入联系电话" />
			 </uni-forms-item>
			<uni-forms-item required label="面积" name="area">
			    <uni-easyinput type="text" v-model="form.area" placeholder="请输入面积" />
			</uni-forms-item>
			<uni-forms-item required label="地址" name="address">
			    <uni-easyinput type="textarea" v-model="form.address" placeholder="请输入地址" />
			</uni-forms-item>
			<uni-forms-item  label="租金情况" name="theRentIs">
			    <uni-easyinput type="textarea" v-model="form.theRentIs" placeholder="请输入租金情况" />
			</uni-forms-item>
			<uni-forms-item  label="装修情况" name="decorateSituation">
			    <uni-easyinput type="textarea" v-model="form.decorateSituation" placeholder="请输入装修情况" />
			</uni-forms-item>
			<uni-forms-item  label="转让费情况" name="transferFee">
			    <uni-easyinput type="textarea" v-model="form.transferFee" placeholder="请输入转让费情况" />
			</uni-forms-item>
			
			</uni-forms>
			
			<view style="margin-top: 30rpx;padding-bottom: 30rpx;">
				<u-button type="primary" :loading="loading" @click="submit('form')">发布</u-button>
			</view>
		<u-modal v-model="show" content="确定要发布吗?" @confirm="confirm" show-cancel-button></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		freeDistribution
	} from "@/services/rental.js"
	import UniForms from "@/components/uni-forms/uni-forms"
	import UniFormsItem from "@/components/uni-forms-item/uni-forms-item"
	import UniEasyinput from "@/components/uni-easyinput/uni-easyinput"
	export default {
		components:{
			UniForms,
			UniFormsItem,
			UniEasyinput
		},
		data() {
			return {
				 
				form: {
					phone: '',
					area: '',
					address: '',
					houseProperty: '',
					theRentIs: '',
					decorateSituation: '',
					transferFee: '',
				},
				default: {
					area: '',
					address: '',
					houseProperty: '',
					theRentIs: '',
					decorateSituation: '',
					transferFee: '',
					phone: ''
				},
				loading: false,
				show:false,
				rules: {
					area: {
						rules:[{
							required: true,
							errorMessage: '请输入面积',
							// trigger: ['blur', 'change']
						},
						{
							max: 255,
							errorMessage: '最多255个字符',
							// trigger: ['blur', 'change']
						},]
					},
					address: {
						
						rules:[{
							required: true,
							errorMessage: '请输入地址',
							// trigger: ['blur', 'change']
						},
						{
							maxLength: 255,
							errorMessage: '最多255个字符',
							// trigger: ['blur', 'change']
						},]
						
					},
					phone: {
						rules:[{
							required: true,
							errorMessage: '请输入电话号码',
						},
						{
							pattern: '^1[3456789]\\d{9}$',
							errorMessage: '请输入正确的电话号码',
						},
						]
					},
				},
				// #ifdef MP-TOUTIAO
				validate:{
					phone:function(value){
						if(value.trim() == ''){
							return '请输入电话'
						}
						if(!/^1[3456789]\d{9}$/.test(value)){
							return '请输入正确的电话号码'
						}
						return true
					},
					area:function(value){
						if(value.trim() == ''){
							return '请输入面积'
						}
						if(value.length > 255){
							return '面积最多255个字符'
						}
						return true
					},
					address:function(value){
						if(value.trim() == ''){
							return '请输入地址'
						}
						if(value.length > 255){
							return '地址最多255个字符'
						}
						return true
					},
					
				}
				 //	#endif
				
			};
		},
		onReady() {
	         // #ifndef MP-TOUTIAO
	         	this.$refs.form.setRules(this.rules);
	          //	#endif
			
			
		},
		onShow(){
			this.loading = false
			
		},
		methods: {
			submit(form) {
				        // #ifndef MP-TOUTIAO	
				         this.$refs[form].validate().then(res=>{
				                // console.log('表单数据信息：', res);
								this.show = true
				            }).catch(err =>{
				                console.log('表单错误信息：', err);
				            })
						 //	#endif
						 // #ifdef MP-TOUTIAO
						    console.log(this.form)
							let check = true
							for(let key in this.form){
								if(this.validate.hasOwnProperty(key)  ){
								   let res =	this.validate[key](this.form[key])
								   if(res != true){
									   this.$refs.uToast.show({
									   	title: res,
									   	type: 'error',
									   	duration:1500,
										})
										check = false
										break;
								   }
								}
							}
							if(check){
								this.show = true
							}
						 //	#endif
			},
			getPhone(){
				 console.log(1)
			},
			async confirm(){
				this.loading = true
				let res = await freeDistribution({
					formData: this.form,
				
				})
				if (res.code == 200) {
					this.form = this.default
					this.$refs.uToast.show({
						title: '发布成功',
						type: 'success',
						duration:1500,
						callback:function(){
							uni.navigateTo({
								url:'../mine/MySchedule'
							})
						}
					})
					
				}
				this.loading = false
			}
		}
        

	};
</script>
<style scoped lang="less">
	.content {
		background: white;
		padding: 20rpx 20rpx 0 30rpx;
		min-height: 100vh;
	}
</style>
